/** * @author minisola * @version 20190814 */
<template>
  <view class="so-mask">
    <view class="so-plate animation-scale-up">
      <view class="so-plate-head">
        <view class="so-plate-type">
          <radio-group @change="typeChange">
            <label>
              <radio
                style="transform: scale(0.8)"
                color="#de4141"
                value="1"
                :checked="type === 1"
              />
              普通车牌
            </label>

            <label>
              <radio
                style="transform: scale(0.8)"
                color="#de4141"
                value="2"
                :checked="type === 2"
              />
              新能源车牌
            </label>
          </radio-group>
        </view>
      </view>
      <view class="so-plate-body">
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 0 }"
          @tap="inputSwitch"
          data-index="0"
        >
          <text>{{ currentInputValue[0] }}</text>
        </view>
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 1 }"
          @tap="inputSwitch"
          data-index="1"
        >
          <text>{{ currentInputValue[1] }}</text>
        </view>
        <view class="so-plate-dot"></view>
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 2 }"
          @tap="inputSwitch"
          data-index="2"
        >
          <text>{{ currentInputValue[2] }}</text>
        </view>
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 3 }"
          @tap="inputSwitch"
          data-index="3"
        >
          <text>{{ currentInputValue[3] }}</text>
        </view>
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 4 }"
          @tap="inputSwitch"
          data-index="4"
        >
          <text>{{ currentInputValue[4] }}</text>
        </view>
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 5 }"
          @tap="inputSwitch"
          data-index="5"
        >
          <text>{{ currentInputValue[5] }}</text>
        </view>
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 6 }"
          @tap="inputSwitch"
          data-index="6"
        >
          <text>{{ currentInputValue[6] }}</text>
        </view>
        <view
          class="so-plate-word"
          :class="{ active: currentInputIndex == 7 }"
          @tap="inputSwitch"
          v-if="type == 2"
          data-index="7"
        >
          <text>{{ currentInputValue[7] }}</text>
        </view>
      </view>
      <view class="so-plate-foot">
        <view class="so-plate-keyboard" :style="{ height: keyboardHeight }">
          <view id="keyboard">
            <block v-if="inputType == 1">
              <view
                hover-class="hover"
                class="so-plate-key"
                v-for="el of provinceText"
                :key="el"
                :data-value="el"
                @tap="chooseKey"
                >{{ el }}</view
              >
            </block>
            <block v-if="inputType == 1">
              <text class="so-plate-key fill-block"></text>
              <text class="so-plate-key fill-block"></text>
            </block>
            <block v-if="inputType >= 3">
              <view
                hover-class="hover"
                class="so-plate-key"
                v-for="el of numberText"
                :key="el"
                :data-value="el"
                @tap="chooseKey"
                >{{ el }}</view
              >
            </block>
            <block v-if="inputType >= 2">
              <view
                hover-class="hover"
                class="so-plate-key"
                v-for="el of wordText"
                :key="el"
                :data-value="el"
                @tap="chooseKey"
                >{{ el }}</view
              >
            </block>
            <block>
              <!-- <block v-if="inputType == 3"> -->
              <text
                :key="el.num"
                v-for="el of fillBlock"
                class="so-plate-key fill-block"
              ></text>
            </block>
            <!-- <block v-if="inputType == 4">
              <view
                hover-class="hover"
                class="so-plate-key"
                v-for="el of lastWordText"
                :key="el"
                :data-value="el"
                @tap="chooseKey"
                >{{ el }}</view
              >
            </block> -->
            <text v-if="inputType == 4" class="so-plate-key fill-block"></text>
          </view>
        </view>
        <view class="so-plate-btn-group">
          <view>
            <button
              class="so-plate-btn so-plate-btn--cancel"
              @tap="$emit('close')"
            >
              取消
            </button>
          </view>
          <view>
            <button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">
              删除
            </button>
            <button
              class="so-plate-btn so-plate-btn--submit"
              type="warn"
              @tap="exportPlate"
            >
              完成
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'uni-plate-input',
  data() {
    return {
      type: 1, //车牌类型
      currentInputIndex: 0, //当前编辑的输入框
      // currentInputValue: ['', '', '', '', '', ''],
      currentInputValue: ['', '', '', '', '', '', ''],
      fillBlock: [
        { num: 11 },
        { num: 12 },
        { num: 13 },
        { num: 14 },
        { num: 15 },
        { num: 16 },
      ], //避免:key报错
      keyboardHeightInit: false,
      keyboardHeight: 'auto',
      provinceText: [
        '粤',
        '京',
        '冀',
        '沪',
        '津',
        '晋',
        '蒙',
        '辽',
        '吉',
        '黑',
        '苏',
        '浙',
        '皖',
        '闽',
        '赣',
        '鲁',
        '豫',
        '鄂',
        '湘',
        '桂',
        '琼',
        '渝',
        '川',
        '贵',
        '云',
        '藏',
        '陕',
        '甘',
        '青',
        '宁',
        '新',
      ],
      numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      wordText: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
      ],
      lastWordText: ['港', '澳', '学', '领', '警'],
    }
  },
  props: {
    plate: {
      type: String,
    },
  },
  computed: {
    //输入框类型
    inputType() {
      switch (this.currentInputIndex) {
        case 0:
          return 1
          break
        case 1:
          return 2
          break
        case 2:
          return 3
          break
        case 3:
          return 3
          break
        case 4:
          return 3
          break
        case 5:
          return 3
          break
        case 6:
          return this.type == 2 ? 3 : 4
          break
        case 7:
          return 4
          break
        default:
          return 1
          break
      }
    },
  },
  watch: {
    currentInputIndex: function (n, o) {
      if (!this.keyboardHeightInit) return
      this.$nextTick(() => {
        this.changeKeyboardHeight()
      })
    },
  },
  methods: {
    //车牌类型切换
    typeChange(e) {
      const { value } = e.detail
      this.type = parseInt(value)
      this.currentInputIndex = 0
      if (value == 1) {
        this.currentInputValue.length = 7
        // this.currentInputValue = ['', '', '', '', '', '', '']
        // this.currentInputValue = ['', '', '', '', '', '']
      } else {
        this.currentInputValue = [...this.currentInputValue.slice(0, 7), '']
        // this.currentInputValue = ['', '', '', '', '', '', '']
      }
    },
    inputSwitch(e) {
      const { index } = e.currentTarget.dataset
      this.currentInputIndex = parseInt(index)
    },
    chooseKey(e) {
      const { value } = e.currentTarget.dataset
      this.$set(this.currentInputValue, this.currentInputIndex, value)
      if (this.type == 1 && this.currentInputIndex < 6) {
        this.currentInputIndex++
      }
      if (this.type == 2 && this.currentInputIndex < 7) {
        this.currentInputIndex++
      }
    },
    deleteKey() {
      this.$set(this.currentInputValue, this.currentInputIndex, '')
      if (this.currentInputIndex != 0) this.currentInputIndex--
    },
    exportPlate() {
      const plate = this.currentInputValue.join('')
      let err = false
      if (this.type === 1 && plate.length != 7) {
        err = true
      } else if (this.type === 2 && plate.length != 8) {
        err = true
      }
      if (err)
        return uni.showToast({
          title: '请输入完整的车牌号码',
          icon: 'none',
        })

      this.$emit('export', plate)
    },
    changeKeyboardHeight() {
      const that = this
      const query = uni.createSelectorQuery().in(this)
      query.select('#keyboard').boundingClientRect()
      query.exec(function (res) {
        if (res && res[0]) {
          that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
          that.keyboardHeightInit = true
        }
      })
    },
  },
  mounted() {
    console.log(this.plate)
    const plateKey = this.plate.split('')
    if (plateKey.length === 7) {
      this.type = 1
    } else if (plateKey.length === 8) {
      this.type = 2
    }
    if (plateKey.length === 7 || plateKey.length === 8) {
      this.currentInputValue = plateKey
      this.currentInputIndex = plateKey.length - 1
    }

    setTimeout(() => {
      //在动画结束之后才开始获取
      this.$nextTick(() => {
        this.changeKeyboardHeight()
      })
    }, 500)
  },
}
</script>
//
<style scoped lang="scss">
.so-plate-btn-group {
  padding-bottom: 36rpx !important;
}
@import './uni-plate-input';
</style>
